import Taro, {Component, Config} from '@tarojs/taro'
import {View, Text, Swiper, SwiperItem, Image, Video} from '@tarojs/components'
import './topBanner.scss'

interface ComponentState {
    currentPoint: number
    isShowVideo: boolean
    autoplay: boolean,
    videoUrl: string
}

type Props = {
    topBannerList: Array<any>;
    showVideo: boolean
}

export default class TopBanner extends Component<Props, ComponentState> {

    constructor(props) {
        super(props);
        this.state = {
            currentPoint: 1,
            isShowVideo: false,
            autoplay:true,
            videoUrl: ""
        };
    }

    onChange(e) {
        this.setState({
            currentPoint: e.detail.current + 1,
            autoplay:true,
        })
    }

    onError() {
        this.setState({isShowVideo: false})
    }

    onPlayClick() {
      this.setState({autoplay:false})
    }
    onEnded(){
        this.setState({autoplay:true})
    }

    onPreviewClick(index){
        let {topBannerList} = this.props;
        let imageList = [...topBannerList];
        imageList.splice(0, 1);
        Taro.previewImage({
            current: imageList[index-1], // 当前显示图片的http链接
            urls: imageList // 需要预览的图片http链接列表
        })                                                                                                                                                                     
    }
    render() {
        let {currentPoint, isShowVideo, autoplay} = this.state;

        let {topBannerList, showVideo} = this.props;
        console.log('topBannerList',topBannerList)
        return (
            <View className='top-banner'>
                <Swiper
                    current={0}
                    circular={true}
                    vertical={false}
                    autoplay={autoplay}
                    onChange={this.onChange.bind(this)}>
                    {topBannerList && topBannerList.map((item, index) => (
                        <View key={'list' + index}>
                            <SwiperItem>
                                <View>
                                    {showVideo && currentPoint == 1 &&
                                    <Video
                                        showFullscreenBtn={true}
                                        onEnded={this.onEnded.bind(this)}
                                        onPlay={this.onPlayClick.bind(this)}
                                        playBtnPosition='center'
                                        id="myVideo"
                                        className='video-content'
                                        src={item}
                                        onError={this.onError.bind(this)}
                                    />}
                                    <View className='banner-content'>
                                        <Image
                                            onClick={this.onPreviewClick.bind(this,index)}
                                            src={item}
                                            mode='aspectFill'
                                            className='adImg'
                                            lazy-load={true}
                                        />
                                    </View>
                                </View>

                            </SwiperItem>
                        </View>
                    ))}
                </Swiper>
                <Text className='indicator-content'>{currentPoint}/{topBannerList.length}</Text>
            </View>
        )
    }
}
